<template>
  <div class="u_manage">

      <div class="tit_00">
        账户管理
      </div>

      <div class="u_mBox">
        <div class="tit_01">
          我的信息
        </div>
        <ul>
        	<li>
            <div class="li_L">
              <div class="it_Name">
                我的头像：
              </div>
              <div class="li_L_R">
                <div class="txImg">
                  <img :src="myInfo.avatar" >
                  <input type="file" @change="upTuFn" accept="image/*">
                </div>
              </div>
            </div>
            <div class="li_R">
              <span>
                修改
                <input multiple="multiple" type="file" @change="upTuFn" accept="image/*">
              </span>
            </div>
          </li>
        	<li>
            <div class="li_L">
                <div class="it_Name">
                  我的昵称：
                </div>
                <div class="li_L_R">
                  <div v-show="!is_Show_nickname" class="o_nickName txt">
                    {{myInfo.nickname}}
                  </div>
                  <div v-show="is_Show_nickname" class="c_nickName">
                    <input type="text" v-model="myInfo.nickname"/>
                  </div>
                </div>
              </div>
              <div class="li_R">
                <span v-show="!is_Show_nickname" @click="c_nickNameFn">
                  修改
                </span>
                <span v-show="is_Show_nickname" @click="c_nickConfirmFn">
                  确定
                </span>
              </div>

          </li>
          <li>
              <div class="li_L">
                  <div class="it_Name">
                    我的ID：
                  </div>
                  <div class="li_L_R">
                    <div class="txt">
                      {{myInfo.id}}
                    </div>
                  </div>
                </div>
            </li>
          <li class="m_li_L">
              <div class="li_L" style="width: auto;">
                  <div class="it_Name">
                    我的等级：
                  </div>
                  <div class="li_L_R">
                    <div class="txt">
                      {{myInfo.vip}}
                    </div>
                  </div>
                </div>

                <div class="li_R">
                      <span>
                        到期时间：{{tg_Time(myInfo.vip_expire)}}
                      </span>
                    </div>
            </li>
          <li>
              <div class="li_L">
                  <div class="it_Name">
                    余额：
                  </div>
                  <div class="li_L_R">
                    <div class="txt">
                      {{myInfo.balance}}
                    </div>
                  </div>
                </div>

                <div class="li_R">
                      <span @click="modifyFn('chargeCoin')">
                        立即充值
                      </span>
                    </div>
            </li>


        	<li>
            <div class="li_L">
                <div class="it_Name">
                  手机号：
                </div>
                <div class="li_L_R">
                  <div class="txt">
                    {{dotNumFn(myInfo.mobile)}}
                  </div>
                </div>
              </div>
              <div class="li_R">
                <span @click="modifyFn('PhoneNum',false)" v-if="myInfo.is_mobile==0">
                  未绑定
                </span>
                <span @click="modifyFn('PhoneNum',true)" v-else>
                  修改
                </span>
              </div>

          </li>
        	<li>
            <div class="li_L">
                <div class="it_Name">
                  邮箱：
                </div>
                <div class="li_L_R">
                  <div class="txt">
                    {{emailNumFn(myInfo.email)}}
                  </div>
                </div>
              </div>
              <div class="li_R">
                <span @click="modifyFn('email',false)" v-if="myInfo.is_email==0">
                  未绑定
                </span>
                <span @click="modifyFn('email',true)" v-else>
                  修改
                </span>
              </div>
          </li>
       	<li>
            <div class="li_L">
                <div class="it_Name">
                  QQ
                </div>
                <div class="li_L_R">
                  <div class="txt">

                  </div>
                </div>
              </div>
              <div class="li_R">
                <a href="javascript:void(0);" v-if="myInfo.is_wechat==0">
                  未绑定
                </a>
                <span v-else>
                  已绑定
                </span>
              </div>
          </li>
          <li>
            <div class="li_L">
                <div class="it_Name">
                  微信
                </div>
                <div class="li_L_R">
                  <div class="txt">
                    <!-- wxid_81gihfuyehbe33 -->
                  </div>
                </div>
              </div>
             <!-- <a :href="wxBindLink" class="li_R">
                  <span v-if="myInfo.is_wechat==0">
                    未绑定
                  </span>
                  <span v-else>
                    已绑定
                  </span>
                </a> -->
              <div class="li_R">
                  <a :href="wxBindLink" v-if="myInfo.is_wechat==0">
                    未绑定
                  </a>
                  <span v-else>
                    已绑定
                  </span>
                </div>

          </li>
        </ul>
      </div>

       <div class="u_mBox">
         <div class="tit_01">
           密码设置
         </div>
         <ul>

         	<li>
             <div class="li_L">
                 <div class="it_Name">
                   我的密码：
                 </div>
                 <div class="li_L_R">
                   <div v-if="myInfo.is_password!==0" class="txt">
                     ******
                   </div>
                 </div>
               </div>
               <div class="li_R">
                   <span @click="modifyFn('pwd',false)" v-if="myInfo.is_password==0">
                     未设置
                   </span>
                   <span @click="modifyFn('pwd',true)" v-else>
                     修改
                   </span>
               </div>

           </li>
         </ul>
       </div>

 <!--      <div class="u_manageBot">
         <div class="u_manageBtn">
           保存
         </div>
       </div> -->



  </div>
</template>

<script>
  import qs from "qs";
  export default{
    data(){
      return{
        is_Show_nickname:false,
        myHost:"",
        myWxTicket:"",
        isHas_myWxTicket:false,
        wxBindLink:""
      }
    },
    created() {
      let that=this;

    },


    computed:{
      dotNumFn(val){
        return (val)=>{
          return val.slice(0,3)+"***"+val.slice(val.length-3,val.length);
        }
      },
      emailNumFn(val){
        return (val)=>{
          let dotNode=val.indexOf("@");
          return val.slice(0,2)+"***"+val.slice(dotNode,val.length);
        }
      }
    },
    activated() {
      let that=this;
      //绑定微信处理
      console.log("拿localtion:",window.location.host);
      that.myHost=window.location.host;
      that.initWinSearchFn();

      that.bindWxAccount();

    },
    mounted() {
      let that=this;
      //绑定微信处理
      console.log("拿localtion:",window.location.host);
      that.myHost=window.location.host;
      that.initWinSearchFn();

      that.bindWxAccount();

    },

    methods:{

      //绑定微信拿ticket
      initWinSearchFn(){
        let that=this;
        console.log("拿search:",window.location.search);
        if(window.location.search.indexOf("ticket")!==-1){
          that.isHas_myWxTicket=true;
          that.myWxTicket=window.location.search.split("?ticket=")[1];
          console.log("that.myWxTicket:",that.myWxTicket);

          //that.wxScTimer=setInterval(that.wxOpenPlatResFn,2500);


        }else{
          that.isHas_myWxTicket=false;
        }

      },

      bindWxAccount(){
        console.log("绑定微信");
        let that=this;
        let tzLink="http://"+that.myHost+"/u_center/u_manage";
        this.$request.post(
             "/user/bindWechat",
             {
                redirect:tzLink
             },
             {
                'Content-Type': 'application/x-www-form-urlencoded'
             }
           ).then((res)=>{
           console.log("绑定微信请求成功：",res);
           if(res.data.code==200){
             that.wxBindLink=res.data.data.link;
           }
          })
          .catch((err)=>{
           console.log("绑定微信请求失败：",err);
          });

      },
      modifyFn(val,bol){
        let that=this;
        console.log("modifyFn:",val);
        this.$bus.$emit("op_manage_Event",true,val,bol);
      },
      c_nickConfirmFn(){
        let that=this;
        that.c_Img_nickFn();
      },
      c_nickNameFn(){
        let that=this;
        that.is_Show_nickname=!that.is_Show_nickname;
      },
      c_Img_nickFn(){
        let that=this;
        this.$request.post(
           "/user/editProfile",
           {
              nickname:that.myInfo.nickname,
              avatar:that.myInfo.avatar
           },
           {
              'Content-Type': 'application/x-www-form-urlencoded'
           }
         ).then((res)=>{
         console.log("修改昵称或头像请求成功：",res);
         that.is_Show_nickname=false;
         that.getU_Info();
        })
        .catch((err)=>{
         console.log("修改昵称或头像请求失败：",err);
        });

      },
      upTuFn(event){
          let that=this;
          let param = new FormData();
          let file = event.currentTarget.files[0];
          console.log("file:",file);
          param.append('file',file,file.name);
          param.append('type','payment');
          this.$request.fileUpload(
            "/upload/index",
            param
          ).then((res)=>{
          console.log("上传头像请求成功：",res.data.data.url);
          that.myInfo.avatar=res.data.data.url;
          that.c_Img_nickFn();
         })
         .catch((err)=>{
          console.log("上传头像请求失败：",err);
         });

      	},
    }
  }
</script>

<style lang="less" scoped="scoped">
  input[type="file"]{
  	display: block;
  	position: absolute;
  	top: 0;
  	left: 0;
  	z-index: 1;
  	width: 100%;
  	height: 100%;
  	opacity: 0;
  	cursor: pointer;
  }
  .u_manage{
  	padding-left: 54px;
  	padding-top: 30px;
  	.tit_00{
  		border-bottom: 1px solid #ececec;
  		padding:0 8px;
  		height: 55px;
  		line-height: 55px;
  		    font-size: 18px;
  		    color: #282828;
  	}

  	.u_mBox{
  		padding-right: 46px;
  		.tit_01{
  			    padding-top: 34px;
  			    padding-left: 10px;
  			    padding-bottom: 12px;
  			    font-size: 18px;
  			    color: #282828;
  		}
  		ul{
  			li{
  				padding: 26px 8px 26px 16px;
  				border-bottom: 1px dashed #ddd;
  				display: flex;
  				flex-direction: row;
  				justify-content: space-between;
  				align-items: center;
  				.li_L{
  					display: flex;
  					flex-direction: row;
  					align-items: center;
            width: calc(100% - 60px);
  					.it_Name{
  						    color: #777;
  							font-size: 14px;
  							line-height: 24px;
  							width: 105px;
  					}
  					.li_L_R{
              width: calc(100% - 110px);
  						.txImg{
  							border: 1px dashed #d9d9d9;
  							width: 80px;
  							height: 80px;
  							border-radius: 50%;
  							overflow: hidden;
  							position: relative;
  							img{
  								display: block;
  								width: 100%;
  								height: 100%;
  								cursor: pointer;
  							}
  						}

  						.txImg:hover{
  							border-color: #2c8eff;
  						}

  						.txt{
  						  font-size: 14px;
  						  line-height: 24px;
  						  color: #000;
                white-space: nowrap;
  						}
  					}

  				}
  				.li_R{
  					overflow: hidden;
  						cursor: pointer;
              display: block;
              a{
              white-space: nowrap;
  						display: block;
  						cursor: pointer;
  						font-size: 14px;
  						line-height: 24px;
  						overflow: hidden;
  						color: #2c8eff;
  					    position: relative;
              }
  					span{
              white-space: nowrap;
  						display: block;
  						cursor: pointer;
  						font-size: 14px;
  						line-height: 24px;
  						overflow: hidden;
  						color: #2c8eff;
  					    position: relative;
  					}
  				}

  			}
  		}
  	}

  	.u_manageBot{
  		display: flex;
  		flex-direction: row-reverse;
  		padding: 40px 44px 40px 0;
  		.u_manageBtn{
  			    padding: 0 48px;
  			    border-color: #2c8eff;
  			    background-color: #2c8eff;
  			    font-size: 16px;
  			    color: #fff;
  				height: 40px;
  				line-height: 40px;
  				cursor: pointer;
  				border-radius: 40px;
  		}
  	}
  }
  .o_nickName{
    height: 42px !important;
    line-height: 42px !important;
        color: #606266 !important;
        font-size: 15px !important;
        padding: 0 15px !important;
        width: calc(100% - 30px) !important;
  }

.c_nickName{
  input{
    display: block;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        color: #606266;
        display: inline-block;
        font-size: 15px;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        width: calc(100% - 30px);
  }
}




@media screen and (max-width:767px){
  .u_manage{
    padding: 0;
  }
  .u_mBox{
    padding: 0 20px !important;
    ul{
      li{
        padding:26px 5px !important;
      }
      .m_li_L{
        flex-direction: column !important;
        align-items: flex-start !important;
      }
    }
  }

  .u_manageBot{
    padding: 40px 0 !important;
    flex-direction: row;
    justify-content: center;
  }
}

</style>
